<template>
  <div id="orderlistoperation-box">
    <div id="orderlisthome-hread">
      <div class="orderlisthome-hread-1">
        <img
          @click="this.$router.go(-1)"
          src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BD%91%E7%BB%9C%E5%BC%82%E5%B8%B8/u272.png"
        />
        <span>我的订单</span>
      </div>
      <div id="orderlisthome-body">
        <van-tabs v-model:active="active">
          <van-tab title="全部">
            <div class="orderlistoperation1-body-1" @click="dfk()">
              <div class="obp0-1">
                <img
                  src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1401.png"
                />
                <span>北京华睿整形医院</span>
                <span style="color: red; margin-left: 32%">等待付款</span>
              </div>
              <div class="obp1-1">
                <div class="bop1-1-1">
                  <img
                    src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9387.png"
                  />
                </div>
                <div class="bop1-1-2">
                  <span class="ssp"
                    >【水光针】水光针/皮肤修正/祛痘嫩
                    <p>肤/皮肤清洁</p></span
                  >
                  <p>
                    基础套餐
                    <span style="margin-left: 100%">*1</span>
                  </p>
                  <p>
                    预约金<span style="color: red">￥299.00</span
                    >到店支付￥699.00
                  </p>
                </div>
              </div>
              <div class="bop1-1-3">
                <div class="bo1-1-3-1" @click="qzf()">去付款</div>
              </div>
            </div>
            <div class="orderlistoperation1-body-1" @click="dxf()">
              <div class="obp0-1">
                <img
                  src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1401.png"
                />
                <span>北京华睿整形医院</span>
                <span style="margin-left: 34%">已付款</span>
              </div>
              <div class="obp1-1">
                <div class="bop1-1-1">
                  <img
                    src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9387.png"
                  />
                </div>
                <div class="bop1-1-2">
                  <span class="ssp"
                    >【水光针】水光针/皮肤修正/祛痘嫩
                    <p>肤/皮肤清洁</p></span
                  >
                  <p>
                    基础套餐
                    <span style="margin-left: 100%">*1</span>
                  </p>
                  <p>
                    预约金<span style="color: red">￥299.00</span
                    >到店支付￥699.00
                  </p>
                </div>
              </div>
            </div>
            <div class="orderlistoperation1-body-1" @click="dpj()">
              <div class="obp0-1">
                <img
                  src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1401.png"
                />
                <span>北京华睿整形医院</span>
                <span style="margin-left: 32%">待评价</span>
              </div>
              <div class="obp1-1">
                <div class="bop1-1-1">
                  <img
                    src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9387.png"
                  />
                </div>
                <div class="bop1-1-2">
                  <span class="ssp"
                    >【水光针】水光针/皮肤修正/祛痘嫩
                    <p>肤/皮肤清洁</p></span
                  >
                  <p>
                    基础套餐
                    <span style="margin-left: 100%">*1</span>
                  </p>
                  <p>
                    预约金<span style="color: red">￥299.00</span
                    >到店支付￥699.00
                  </p>
                </div>
              </div>
              <div class="bop1-1-3">
                <div class="bo1-1-3-1" @click="qpj()">去评价</div>
              </div>
            </div>
            <div class="orderlistoperation1-body-1" @click="tkwc()">
              <div class="obp0-1">
                <img
                  src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1401.png"
                />
                <span>北京华睿整形医院</span>
                <span style="margin-left: 34%">退款完成</span>
              </div>
              <div class="obp1-1">
                <div class="bop1-1-1">
                  <img
                    src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9387.png"
                  />
                </div>
                <div class="bop1-1-2">
                  <span class="ssp"
                    >【水光针】水光针/皮肤修正/祛痘嫩
                    <p>肤/皮肤清洁</p></span
                  >
                  <p>
                    基础套餐
                    <span style="margin-left: 100%">*1</span>
                  </p>
                  <p>
                    预约金<span style="color: red">￥299.00</span
                    >到店支付￥699.00
                  </p>
                </div>
              </div>
            </div>
            <div class="orderlistoperation1-body-2" @click="yqx()">
              <div class="obp2-0">
                <img
                  src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1401.png"
                />
                <span>北京华睿整形医院</span>
                <span style="margin-left: 34%">已取消</span>
              </div>
              <div class="obp2-1">
                <div class="bop2-1-1">
                  <img
                    src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9387.png"
                  />
                </div>
                <div class="bop2-1-2">
                  <span class="ssp2"
                    >【水光针】水光针/皮肤修正/祛痘嫩
                    <p>肤/皮肤清洁</p></span
                  >
                  <p>
                    基础套餐
                    <span style="margin-left: 100%">*1</span>
                  </p>
                  <p>
                    预约金<span style="color: #cccccc">￥299.00</span
                    >到店支付￥699.00
                  </p>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="待付款"
            ><div class="orderlistoperation1-body-1" @click="dfk()">
              <div class="obp0-1">
                <img
                  src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1401.png"
                />
                <span>北京华睿整形医院</span>
                <span style="color: red; margin-left: 32%">等待付款</span>
              </div>
              <div class="obp1-1">
                <div class="bop1-1-1">
                  <img
                    src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9387.png"
                  />
                </div>
                <div class="bop1-1-2">
                  <span class="ssp"
                    >【水光针】水光针/皮肤修正/祛痘嫩
                    <p>肤/皮肤清洁</p></span
                  >
                  <p>
                    基础套餐
                    <span style="margin-left: 100%">*1</span>
                  </p>
                  <p>
                    预约金<span style="color: red">￥299.00</span
                    >到店支付￥699.00
                  </p>
                </div>
              </div>
              <div class="bop1-1-3">
                <div class="bo1-1-3-1" @click="qzf()">去付款</div>
              </div>
            </div></van-tab
          >
          <van-tab title="待消费">
            <div class="orderlistoperation1-body-1" @click="dxf()">
              <div class="obp0-1">
                <img
                  src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1401.png"
                />
                <span>北京华睿整形医院</span>
                <span style="margin-left: 34%">已付款</span>
              </div>
              <div class="obp1-1">
                <div class="bop1-1-1">
                  <img
                    src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9387.png"
                  />
                </div>
                <div class="bop1-1-2">
                  <span class="ssp"
                    >【水光针】水光针/皮肤修正/祛痘嫩
                    <p>肤/皮肤清洁</p></span
                  >
                  <p>
                    基础套餐
                    <span style="margin-left: 100%">*1</span>
                  </p>
                  <p>
                    预约金<span style="color: red">￥299.00</span
                    >到店支付￥699.00
                  </p>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="待评价"
            ><div class="orderlistoperation1-body-1" @click="dpj()">
              <div class="obp0-1">
                <img
                  src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1401.png"
                />
                <span>北京华睿整形医院</span>
                <span style="margin-left: 32%">待评价</span>
              </div>
              <div class="obp1-1">
                <div class="bop1-1-1">
                  <img
                    src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9387.png"
                  />
                </div>
                <div class="bop1-1-2">
                  <span class="ssp"
                    >【水光针】水光针/皮肤修正/祛痘嫩
                    <p>肤/皮肤清洁</p></span
                  >
                  <p>
                    基础套餐
                    <span style="margin-left: 100%">*1</span>
                  </p>
                  <p>
                    预约金<span style="color: red">￥299.00</span
                    >到店支付￥699.00
                  </p>
                </div>
              </div>
              <div class="bop1-1-3">
                <div class="bo1-1-3-1" @click="qpj()">去评价</div>
              </div>
            </div></van-tab
          >
          <van-tab title="退款"
            ><div class="orderlistoperation1-body-1" @click="tkwc()">
              <div class="obp0-1">
                <img
                  src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1401.png"
                />
                <span>北京华睿整形医院</span>
                <span style="margin-left: 34%">退款完成</span>
              </div>
              <div class="obp1-1">
                <div class="bop1-1-1">
                  <img
                    src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9387.png"
                  />
                </div>
                <div class="bop1-1-2">
                  <span class="ssp"
                    >【水光针】水光针/皮肤修正/祛痘嫩
                    <p>肤/皮肤清洁</p></span
                  >
                  <p>
                    基础套餐
                    <span style="margin-left: 100%">*1</span>
                  </p>
                  <p>
                    预约金<span style="color: red">￥299.00</span
                    >到店支付￥699.00
                  </p>
                </div>
              </div>
            </div></van-tab
          >
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  mounted() {
    // console.log(this.$route);
    // if (this.$route.fullPath.includes("?")) {
    //   console.log(this.$route.fullPath);
    //   let num = this.$route.fullPath.split("?")[1];
    //   this.$router.push({ path: "/orderlist/orderlistoperation"+num });
    // }
  },
  setup() {
    const router = useRouter();
    function qzf() {
      router.push({ path: "/shopCashier" });
    }
    function dfk() {
      router.push({ path: "orderlistoperation1" });
    }
    function dxf() {
      router.push({ path: "orderlistoperation2" });
    }
    function dpj() {
      router.push({ path: "orderlistoperation3" });
    }
    function tkwc() {
      router.push({ path: "orderlistoperation4" });
    }
    function yqx() {
      router.push({ path: "orderlistoperation5" });
    }
    return {
      qzf,
      dfk,
      dxf,
      dpj,
      tkwc,
      yqx,
    };
  },
};
</script>

<style scoped>
#orderlistoperation-box {
  width: 390px;
  height: 1200px;
  background-color: #f3f1ef;
}
/* ----------------------------------- */
#orderlisthome-hread {
  width: 100%;
  height: 10%;
  background-color: white;
}
.orderlisthome-hread-1 {
  line-height: 600%;
}
.orderlisthome-hread-1 span {
  margin-left: 40%;
  font-size: 18px;
}
/* --------------------------------------------- */
#orderlisthome-body {
  width: 100%;
  height: 90%;
}
.orderlistoperation1-body-1 {
  width: 90%;
  height: 30%;
  background-color: white;
  border-radius: 10px;
  margin-top: 4%;
  margin-left: 5%;
}
.obp0-1 img {
  margin-top: 5%;
}
.obp1-1 {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  justify-content: space-around;
}
.bop1-1-1 {
  width: 20%;
  height: 90%;
  margin-top: 6%;
}
.bop1-1-2 {
  width: 70%;
  height: 70%;
  margin-top: 6%;
}
.bop1-1-2 p {
  font-size: 12px;
  color: #af9eab;
}
.bo1-1-3 {
  width: 90%;
  height: 20%;
}
.bo1-1-3-1 {
  margin-left: 80%;
  width: 60px;
  height: 30px;
  text-align: center;
  border: 1px solid red;
}
.ssp {
  font-size: 14px;
}
/* -------------------------------------------------- */
.orderlistoperation1-body-2 {
  color: #cccccc;
  width: 90%;
  height: 30%;
  background-color: white;
  border-radius: 10px;
  margin-top: 4%;
  margin-left: 5%;
}
.obp2-0 img {
  margin-top: 5%;
}
.obp2-1 {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  justify-content: space-around;
}
.bop2-1-1 {
  width: 20%;
  height: 90%;
  margin-top: 6%;
}
.bop2-1-2 {
  width: 70%;
  height: 70%;
  margin-top: 6%;
}
.bop2-1-2 p {
  font-size: 12px;
  color: #cccccc;
}
.bo2-1-3 {
  width: 90%;
  height: 20%;
}
.bo2-1-3-1 {
  margin-left: 80%;
  width: 60px;
  height: 30px;
  text-align: center;
  border: 1px solid red;
}
.ssp2 {
  font-size: 14px;
}
</style>